<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            样式的冲突
                -当我们通过不同的选择器,选中相同的元素,为相同的样式设置不同的值此时就发生样式的冲突
            发生样式冲突时,应用哪个样式由选择器的权重(优先级)决定

            选择器的权重
                内联样式       1,0,0,0
                id选择器       0,1,0,0
                类和伪类选择器   0,0,1,0
                元素选择器       0,0,0,1
                通配选择器    0,0,0,0,0
                继承的样式 没有优先级

              比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级最高,则越优先显示(分组选择器是单独计算)
              选择器的累加不会超过其最大的数量级,类选择器在高也不会超过id选择器

              如果优先级计算后相同,此时则优先使用靠下的样式

              可以在某一个样式的后边添加 !important  ,则此时该样式最高样式的优先级,甚至超过内联样式
              注意:在开发中要慎用
              
         */
        #box{
            color: orange ;
        }
        div#box{
            color: yellow;
        }
        .red{
            color: red !important;
        }

        *{
            font-size: 50px;
        }
        div{
            font-size: 20px;
        }

    </style>
</head>
<body>
    <div id="box" class="red d1 d2 d3 d4">我是一个div <span>div中的span</span> </div>
</body>
</html>